/**
 * This file defines styles common to all layouts used within Pulse. These
 * styles should primarily refer to elements used in layout templates. Common
 * interface elements such as links, headers, lists, and tables may also be
 * defined here. This of this as a style guide.
 */

/******************************************************************************
 * Common elements
 *****************************************************************************/
* {
  margin: 0;
  padding: 0;
}

body {
  background: #073C85 url(/img/background_3.png) no-repeat scroll center 22px;
}

body, p, div, td, th, textarea, input, option {
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #333;
}

a {
  color: #055FC0;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/******************************************************************************
 * Page structure definition
 *****************************************************************************/

#sliver {
  background: #393939 url(/img/sliver_bg.png) repeat-x scroll top left;
  height: 22px;
  line-height: 22px;
}

#sliver * {
  color: #c1c1c1;
  font-size: 11px;
}

#sliver p {
  float: right;
  margin: 0;
}

#sliver a {
  margin-left: 10px;
}

#sliver ul {
  float: left;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0px;
  padding: 0;
}

#sliver li {
  background-image: url(/img/comcast_icons.gif);
  background-repeat: no-repeat;
  display: inline;
  float: left;
}
#sliver li#d-home {
  background-image:none;
  padding-left: 0px;
  padding-right: 16px;
}

#sliver li#d-home a {
  margin-left: 0px;
  padding-left: 0px;
  text-decoration: underline;
}

#sliver li#d-home a:hover {
  margin-left: 0px;
  text-decoration: none;
}

#sliver li#d-email {
  background-position: 0 4px;
  padding-right: 10px;
  padding-left: 9px;
}

#sliver li#d-voice {
  background-position: 0 -47px;
  padding-right: 16px;
  padding-left: 6px;
}

#sliver .welcome {
  padding-left: 1px;
}

/* All content is centered */
#header, #content, #footer, #sliver div.sliver_in {
  margin: 0 auto;
  width: 980px;
}
#sliver div.sliver_in {
  position:relative;
  z-index:99;
}

/****************** Header ******************/
#header {
  position: relative;
  margin: 12px auto 10px auto;
/*  background: url(/img/header_bg_1.gif) repeat-x scroll top left;*/
  background: url(/img/header_sprite.png) repeat-x scroll 0 -90px;
  height: 44px;
  z-index: 75;
}
  #header div.logo {
    margin: 0;
  }
  #header .rightCap {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 8px;
    height: 44px;
/*    background: url(/img/header_right_1.gif) no-repeat top right;*/
    background: url(/img/header_sprite.png) no-repeat -120px -210px;
  }
  
  /* Only underline text in language chooser, not arrow */
  #header a:hover.languageChooser {
    text-decoration: none;
  }
  #header a:hover.languageChooser span {
    text-decoration: underline;
  }

/****************** Tabs ******************/
#tabs {
  position: relative;
  font-size: 0;
  width: 650px;
  z-index: 10;
}
#tabs ul.tabsList {
  bottom: 0px;
  height: 44px;
}

#tabs .tabsList .tabsListItem {
  display: block;
  float: left;
  list-style: none;
  z-index: 10;
}

div#dropDownMenu {
  position:absolute; 
  top:0px; 
  margin-top: 44px;
  background-color: #FFFFFF;
  border: 1px solid #5D92D7;
  border-top: none;
  width: 150px;
}

#tabs #dropDownMenu a {
  width: 150px;
  height: 30px;
  font-weight: normal;
  font-size: 13px;
  text-align: left;
  color: #055FC0;
  margin-right: 0px;
  background: #FFFFFF;
}

#tabs #dropDownMenu a span {
  margin: 8px 15px;
  white-space:nowrap;
  padding: 0px 20px 0px 1px;
}

#tabs #dropDownMenu a:hover {
  text-decoration: none;
  background: #5A8AC5;
  color: #FFFFFF;
}

#tabs .tabsListItem .dropDownMenuItem a {
 border-right: none; 
}

#tabs .tabsListItem a {
  float: left;
  height: 44px;
  font-weight: bold;
  text-align: center;
  color: #FFFFFF;
  font-size: 15px;
  border-right: 1px solid #64ABF1;  
  overflow:hidden;
}

#tabs a span {
  float:left;
  padding: 14px 15px 0px;
  cursor: pointer;
}

#tabs .homeTab a {
  width: 128px;
  background: none;
}

#tabs span#homeTab {
  margin: 0px;
  width: 128px;
  height: 44px;
/*  background: url(/img/header_plaxo_1.png) no-repeat;*/
  background: url(/img/header_sprite.png) no-repeat;
}

#tabs .selected span#homeTab, #tabs .homeTab a:hover span#homeTab {
  margin: 0px;
/*  background: url(/img/header_plaxo_sel_1.png) no-repeat;*/
  background-position: 0 -45px;
}


#tabs .selected a, #tabs .selected a:hover, #tabs .tabsListItem a:hover {
  text-decoration: none;
/*  background: #5D92D7 url(/img/header_bg_sel_1.gif) repeat-x scroll top left;*/
  background: #5D92D7 url(/img/header_sprite.png) repeat-x scroll 0 -135px;
  color: #fff;
}

#tabs .selectedMore a, #tabs .selectedMore a:hover{
  text-decoration: none;
  background: #fff;
  color: #055FC0;
}

#header .signin {
  float:right;
  clear: right;
  margin-right:10px;
  height:44px;
}
#header .signinWithSearch {
  float: left;
  clear: none;
  margin-left: 15px;
}
#header .signin span, #header .signin a {
  color: #fff;
  font-size:14px;
  font-weight:bold;
  margin-top:15px;
  margin-right:12px;
  float:left;
}
#header .signin a {
  text-decoration:underline;
}
    
/****************** Subheader ******************/
#subHeader {
  margin: 12px auto 10px auto;  
  width: 950px;
}

/****************** Sub-tab navigation ******************/
#subNavContainer {
  background: #f4f4f4 url(/img/subnav_sprite.gif) repeat-x scroll top left;
  position: relative;
  height: 36px;
}

#subNavContainer .subNavLeft {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 36px;
  width: 4px;
  background: #f4f4f4 url(/img/subnav_sprite.gif) no-repeat scroll 0 -37px;
}

#subNavContainer .subNavRight {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 36px;
  width: 4px;
  background: #f4f4f4 url(/img/subnav_sprite.gif) no-repeat scroll -5px -37px;
}

#subNavContainer .subNav {
  padding: 0px 20px;
  line-height: 36px;
}

#subNavContainer ul {
  list-style: none;
}

#subNavContainer ul li {
  list-style: none;
  display: inline;
  margin-right: 20px;
  position: relative;
}

#subNavContainer ul li a {
  font-size: 13px;
}

#subNavContainer ul li.selected a {
  font-weight: bold;
  color: #000;
}

#subNavContainer li .selectedArrow {
  position: absolute;
  left: 0px;
  bottom: -18px;
  
  font-size: 0px;
  width: 100%;
  height: 10px;
  background: url(/img/subnav_arrow.gif) no-repeat center top;
  display: none;
  z-index:99;
}

#subNavContainer li.selected .selectedArrow {
  display: block;
}

/* Don't show in IE6 because they're busted - GH */
* html #subNavContainer li .selectedArrow { display: none !important; }

/********* search bar **************/
#header .searchbar {
	float: right; 
	clear: right;
	display: inline;
	padding-top: 8px;
	margin-right: 10px;
}

#header .searchbar input.text {
	width: 249px;
	padding: 4px 0px 4px 4px;
	margin-top: 3px;
	border: none;
	border-right: none;
	border-left: none;
	color: #606060;
}

#header .searchBorder {
  float:left;
/*  background: url(/img/header_search_bg.gif) repeat-x bottom left;*/
  background: url(/img/header_sprite.png) repeat-x 0 -180px;
  height: 29px;
}

#header .searchbar input.button {
	padding: 3px 5px;
	font-weight: bold;
} 

#header .searchbar .leftCapSearch {
  float: left;
  top: 7px;
  width: 5px;
  height: 29px;
  z-index:15;
/*  background: url(/img/header_search_left.gif) no-repeat top left;*/
  background: url(/img/header_sprite.png) no-repeat 0 -210px;
}

#header .searchbar .searchSubmit {
  float: left;
  background: url(/img/header_sprite.png) no-repeat -87px -210px;
}
#header .searchbar .searchSubmit a {
  width: 32px;
  height: 29px;
  display: block;
}
#header .searchbar .searchSubmit a:hover {
  text-decoration: none;
}

/****************** Content ******************/
#content {
  position: relative;
}

div.mainContent {
  position: relative;
  background-color: #fff;
}


/* Small IE6 bug here: http://marc.baffl.co.uk/browser_bugs/ie-absolute-possition.html (Trac 5299) */
div.contentBottom {
  height: 4px;
  clear: both;
  position: relative;
}

#content .corner {
  font-size: 0px;
  position: absolute;
  height: 3px;
  width: 3px;
  background: #fff no-repeat scroll top left;
}

#content .cornerTL { top: 0px; left: 0px; background-image: url(/img/roundwhite_sprite.gif); background-position: 0 -13px; z-index: 10;}
#content .cornerTR { top: 0px; right: 0px; background-image: url(/img/roundwhite_sprite.gif); background-position: 0 -21px; }
#content .cornerBL { bottom: 0px; left: 0px; background-image: url(/img/roundwhite_sprite.gif); background-position: 0 -5px; }
#content .cornerBR { bottom: 0px; right: 0px; background-image: url(/img/roundwhite_sprite.gif); background-position: 0 -29px; }

/****************** Footer ******************/
#footer {
  padding: 10px 0;
}

#footer div {
  text-align: center;
  color: #999;
}

#footer p.copy {
  color: #999;
}

#footer .links {
  margin-bottom: 10px;
}

#footer li a {
  color: #ccc;
}

/************
  Using class selector instead of id selector in order to customize for popup language chooser
  Id selector posed css inheritance problems
  ************/
#sliver .language_chooser, #header .language_chooser {
  position: absolute;
  top: 20px;
  right: 0px;
  border: 1px solid #397cc6;
  background: #fff;
  z-index:1000;
}

#sliver .language_chooser a, #header .language_chooser a {
  width: 7em;
  padding: 2px 10px;
  border-bottom: none;
  font-size: 12px;
  display: block;
  margin:0;
  color: #055FC0;
}
  
#sliver .language_chooser a:hover, #header .language_chooser a:hover {
  background: #d4e5f5;
  text-decoration: none;
}

ul.links {
  list-style: none;
}

  ul.links li {
    display: inline;
    margin-right: 8px;
  }

div.padded {
  padding: 20px;
}

div.paddedWithAd {
  padding: 20px;
  margin-right: 180px;
}
